@charset "utf-8";
@import "reset";
@import "iconfont";

html{
    font-size: 64px;
}
@function r($px){
    @return $px/64px*1rem;
}

.soso{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 300ms linear;
    transform: translateX(100%);
    background: #f1f1f1;
    .close{
        position: absolute;
        top: 0;
        left: 0;
        height: 45px;
        line-height: 45px;
        width: 100%;
        text-align: center;
        background:#201f1d;        
//      border-bottom:1px solid #514d4c;
        padding:11px 8px;
        >a{
           color:#B20000;
           font-size: r(48px);  
           float: left;
           line-height: r(41px);
           text-align: center; 
        }
        >form{
           float: right;
           height: 24px;
           width: 88%;
//         text-align: center;
           line-height: 24px;
           border:1px solid #FFFFFF;
           border-radius: 20px;
           margin-left: 10px;
           font-size: 0;
           text-align: left;
           >i{
               font-size:14px;
               color:white;
               padding-left:8px ;
               vertical-align: middle;
           }   
           >input{
               background: transparent;
               border: none;
               height: 24px;
               color:white;
               line-height: 24px;
               padding-left: 3px;
               vertical-align: middle;
               
           }          
        }
    }
    .keyword{
        position: absolute;
        top:45px;
        background: #f1f1f1;
        width: 100%;
        padding: r(20px);
        >h1{
            font-size: r(26px);
            line-height: r(52px);
        }
        >ul{
            padding:6px 0;
            >li{
                border: 1px solid #e4e4e4;
                background: white;
                text-align: center;
                height: 26px;
                line-height:26px;
                color: #8b8b8b;
                display:block;
                float: left;
                padding: 0 (4px);
                margin-right:2px ;
                font-size: r(28px);
                &:nth-of-type(4){
                    margin-right: 0;
                }
            }
            .active{
                background: #B20000;
                color: white;
            }
        }
    }
        
}
.sososhow{
    transform: translateX(0);
}
